<template>
  <div class="morePrepareLesson">
   <!--s -->
    <section class="searchBox ">
      <!-- {{$store.state.personPrepareLesson.prepareLesson}} -->
     <div class="searchipuBar t-center">
      <el-input placeholder="请输入内容" class="coll_80"
        v-model="listQuery.condition.title"
         @change="fetchData"
         @keyup.enter.native='fetchData'
        prefix-icon="el-icon-search el-input__icon"  >
          <template slot="prepend">
            <span>
              <i class="el-icon-add-location"></i>
              <span>{{'黄埔'}}</span>
            </span>
          </template>
        </el-input>
        </div>
        <ClassifyDress @conditionSelect="conditionSelect" />
      <!-- <div class="classfiy_box" v-show="activeTabName==='TEACHING_DESIGN'">
        <div class="c_con">
          <div v-for='(item,i,k) in classifyOptions'>
            <el-link class="class_link" :underline='false'> {{i}}</el-link>
            <el-link :class='"class_link classify"+k' :underline='false' v-for='(litem,i) in classifyOptions[i]' target="_blank">{{litem}}</el-link>
          </div>

        </div>
      </div> -->

      <el-row class="searchCon ">
        <el-col :xs='20'  :sm='12' :span="12" :lg='8' :key="li" class="lesson_list_Con" v-for='(lesItem,li) in prepareLesson.records'>
          <div @click="$router.push({name:'teachDesignDetails',query:{designId:lesItem.id}})"><LessonList :list="lesItem"></LessonList></div>
        </el-col>
      </el-row>
    <Pagination
      :current-page="listQuery.pager.page"
      :limit="listQuery.pager.pageSize"
      :total="total"
      :float="'right'"
      :layout="' prev, pager, next'"
      @pagination="pagination"
    />
    </section>

  </div>
</template>

<script>
  import YesTabs from '@/components/YesTabs'
  import LessonList from '@/components/LessonList'
  import Pagination from '@/components/Pagination'
  import ClassifyDress from '@/components/classifyDressing'
  import {teachingResearchReportPage} from '@/api/createResult'
  // import {personPrepareLessonPage} from '@/api/personPrepareLesson'

  export default {
    name: "createResult",
    components: {
      YesTabs,
      LessonList,
      Pagination,
      ClassifyDress
    },
    data() {
      return {
        total:1,
        listQuery:{
          "condition": {
            "categoryList": [
             ],

             title:''
          },

          "orderBys": [
            {
              "asc": true,
              "column": ""
            }
          ],
          "pager": this.$store.state.app.pager
        },
        state: '',
        activeTabName: 'TEACHING_DESIGN',
        classifyOptions: {
          '学段': ['all', '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
          '学科': ['all', '语文', '数学', '英语', '化学'],
          // '教材':['人教版','苏教版','沿海版'],
          '类型1': ['all', '教室', '课件', '反思', '课堂实录'],
          '类型2': ['教师成长', '学科教学'],
        },
        lesson_list: [{
            title: '第二课秋天 作者田良玉',
          },
          {
            title: '第二课秋天 作者田良玉',
          },
          {
            title: '第二课秋天 作者田良玉',
          },
          {
            title: '第二课秋天 作者田良玉',
          },
          {
            title: '第二课秋天 作者田良玉',
          },
          {
            title: '第二课秋天 作者田良玉',
          },
          {
            title: '第二课秋天 作者田良玉',
          },
          {
            title: '第二课秋天 作者田良玉',
          },
          {
            title: '第二课秋天 作者田良玉',
          },

        ],
        initLesson:{
          total:1,
          rescords:[]
        }
      }
    },
    mounted() {

    },
    created() {
      this.fetchData()
    },
    watch:{
      activeTabName:{
        handler: function(val) {
         //this.initDate(this.activeKeyFn)
        },
        immediate: true
      }
    },
    computed:{
      activeKeyFn(){
         var stateName =  this.activeTabName ==='TEACHINGRESEARCH'
         return stateName
      },
      prepareLesson(){
      let  state = this.$store.state,stateName = this.activeTabName
     let prepareLesson =   ['MATERIAL','artical'].indexOf(stateName)>-1?this.initLesson:stateName ==='TEACHINGRESEARCH'?state.teachingResearch.teachReportInfo:
     state.personPrepareLesson.prepareLesson
      this.total = Number(prepareLesson.total) || 1
       return prepareLesson
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      conditionSelect(val){
      var that = this
        this.listQuery.condition.categoryList = val.filter((list,i)=>{
          if(i===0&&(list==='TEACHER'||list==='TRAIN')){
             that.listQuery.condition.prepareLessonType = list
          }else{
            return list
          }
        })
        this.fetchData()
      },
      fetchData(){
        //初始化
        //发布的教研
        //this.getPersonPrepareLessonPage()// 备课 教研设计
        this.listQuery.pager.page = 1
        this.getPersonPrepareLessonPage(this.listQuery)
        },
      getPersonPrepareLessonPage(listQuery){
       this.$store.dispatch('personPrepareLesson/Page',this.listQuery)
      // let  {data} = await personPrepareLessonPage(params)
      },
      async getTeachingResearch(){

        let dataParams = this.listQuery
        let {data}=   await teachingResearch(dataParams)
        this.lesson_list = data.records
        this.total = data.total || this.total
      },
      handleClick(tab, e) {
        console.log(tab, e)
        this.activeTabName = tab.name
      },
      handleSelect() {

      },
      pagination ({ page, limit }) {
        this.listQuery.pager.page = page
        this.listQuery.pager.pageSize = limit
        this.getPersonPrepareLessonPage(this.listQuery)

      }
      // handleSizeChange( size){
      //   this.listQuery.pager.pageSize =  size
      // },
      // handleCurrentChange(page){
      //   this.listQuery.pager.pageSize =  page

      // }
    }
  }
</script>
<style lang="scss" scoped>
  $bg:#2EB06F;
  $gray:#E6F5ED;
  $labg:#ddeae4;
  $textColr-2:rgba(0, 0, 0, .45);

  .searchBox {
    padding: 24px 40px;
    .classfiy_box {
      margin: 20px 0;
      padding: 15px 18px;
      border: 1px solid $bg;

      .class_link {
        padding: 5px;
        margin: 5px;
      }
    }
    .searchCon {
      margin: 15px -30px;
      line-height: 1.8;
      .lesson_list_Con {
        i,
        .labelSpan {
          color: $textColr-2;
          font-size: 12px;
        }
        padding:10px;
      }
    }
  }
</style>
